<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-content: center;
  font-family: system-ui, sans-serif;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
  overflow-x: clip;
}
h2 {
  font-weight: 100;
  font-size: 2rem;
  text-align: center;
}
.choices, .computer {
  display: grid;
  justify-content: center;
  gap: 3em;
}
.btns {
  position: relative;
  border-radius: 100vmax;
  border: 1px solid #1f202050;
  width: 10em;
  aspect-ratio: 1;
}
.choices button {
  position: absolute;
  offset-path: border-box;
  font-size: 4rem;
  margin: 5px;
  border: none;
  background: #E1F8DC;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
  aspect-ratio: 1;
  border: 1px solid #1f202030;
  border-radius: 100vmax;
  offset-rotate: 0deg;
}
#rock {
  offset-distance: 0%;
}
#paper {
  offset-distance: calc(60 / 180 * 100%);
}
#scissors {
  offset-distance: calc(120 / 180 * 100%);
}
.choices button:hover {
  transform: scale(1.2);
}
#result {
  font-size: 1.3rem;
  margin-top: 2em;
  min-height: 3em;
  text-align: center;
  grid-column: span 2;
}
#animation {
  font-size: 4rem;
  border: 1px solid #1f202030;
  border-radius: 100vmax;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  background-image: repeating-conic-gradient(#E1F8DC 0deg 10deg, #0000 10deg 20deg);
  transition: background-color 0.5s ease;
}
@keyframes fireworks {
  0% {
    opacity: 1;
    transform: scale(0);
  }
  80% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}
.firework {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, white 0%, red 40%, yellow 60%, rgba(255, 255, 255, 0) 100%);
  animation: fireworks 1s ease-out forwards;
}
#fireworks-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

</style>
</head>

<body>
  <div class="choices">
    <h2>选择出拳</h2>
    <div class="btns">
      <button id="rock">&#x270A;</button>
      <button id="paper">&#x270B;</button>
      <button id="scissors">&#x270C;&#xFE0F;</button>
    </div>
  </div>
  <div class="computer">
    <h2>电脑出拳</h2>
    <div id="animation">&#x270A;</div>
  </div>
  <div id="result"></div>
  <div id="fireworks-container"></div>
</body>
<script>
document.addEventListener("DOMContentLoaded", function () {
  const choices = ["rock", "paper", "scissors"];
  const emojiMap = {
    rock: "✊",
    paper: "✋",
    scissors: "✌️"
  };
  const animationContainer = document.getElementById('animation');
  let animationInterval;

  document.getElementById("rock").addEventListener("click", function () {
    playGame("rock");
  });

  document.getElementById("paper").addEventListener("click", function () {
    playGame("paper");
  });

  document.getElementById("scissors").addEventListener("click", function () {
    playGame("scissors");
  });

  function playGame(playerChoice) {
    const computerChoice = choices[Math.floor(Math.random() * choices.length)];
    const animationDiv = document.getElementById("animation");
    const resultDiv = document.getElementById("result");

    clearInterval(animationInterval);
    let currentIndex = 0;

    animationInterval = setInterval(() => {
      animationDiv.textContent = emojiMap[choices[currentIndex]];
      currentIndex = (currentIndex + 1) % choices.length;
    }, 100);

    setTimeout(() => {
      clearInterval(animationInterval);
      animationDiv.textContent = emojiMap[computerChoice];
      displayResult(playerChoice, computerChoice);
    }, 1500);
  }

  function displayResult(playerChoice, computerChoice) {
    let result = "";

    if (playerChoice === computerChoice) {
      result = "平局了!";
    } else if (
      (playerChoice === "rock" && computerChoice === "scissors") ||
      (playerChoice === "paper" && computerChoice === "rock") ||
      (playerChoice === "scissors" && computerChoice === "paper")
    ) {
      result = `你赢了! ${emojiMap[playerChoice]} beats ${emojiMap[computerChoice]}.`;
      triggerFireworks();
    } else {
      result = `你输了! ${emojiMap[computerChoice]} beats ${emojiMap[playerChoice]}.`;
      triggerLossBackground();
    }

    document.getElementById("result").textContent = result;
  }

  function triggerFireworks() {
    const fireworksContainer = document.getElementById("fireworks-container");
    fireworksContainer.innerHTML = ""; 

    for (let i = 0; i < 10; i++) {
      const firework = document.createElement("div");
      firework.className = "firework";
      firework.style.left = `${Math.random() * 100}%`;
      firework.style.top = `${Math.random() * 100}%`;
      firework.style.animationDelay = `${Math.random() * 0.5}s`;

      fireworksContainer.appendChild(firework);

      setTimeout(() => {
        firework.remove();
      }, 1000);
    }
  }
  
  function triggerLossBackground() {
        animationContainer.style.backgroundColor = 'red';

        setTimeout(() => {
            animationContainer.style.backgroundColor = '';
        }, 1000);
    }

    function resetBackgroundColor() {
        animationContainer.style.backgroundColor = '';
    }
  
});


</script>
</html>


